vlwkaos' digital garden
트위터 코드 첫 10줄 설명하기
개요
Explain the First 10 Lines of Twitter's Source Code to Me 을 가져온 글. 글쓴이는 기술 역량이 뛰어나지만 라이브코딩이나 화이트보드 인터뷰를 잘 못하는 사람들을 뽑기 위해 웹에 대한 이해도를 테스트하기 위해 [[Web Vitals]], 접근성, [[브라우저 다양성]], 등등을 면접때 질문한다고 하며, 그중 꼭 빼먹지않고 질문하는 내용이 바로 이 트위터 코드 첫 10줄 설명하기라고 한다.
내가 일을 한지 그리 오래하진 않았지만, 이런저런 사람들을 보며 느낀 한가지 확실한 점은 라이브코딩이나 화이트보드 인터뷰가 일할 때 코딩 실력이나 기술적 역량 혹은 그 사람의 잠재력을 파악하는데 큰 도움이 되지 않는다는 점이다. 이런 류의 코딩은 Competitive Programming의 장르로 불리며 애초에 실무적인 것과 동떨어진 형태로 발전해왔기 때문에 어쩌면 당연한지도 모른다. 오히려 코딩테스트는 잘하지만, 이런 절차적 코딩에 익숙해진 나머지 실무적 코딩을 잘 못하는 경우도 본적이 있다. (혹은 원래 기술 역량이 부족하지만 노력하에 코딩테스트만 잘하게되어 채용이 된 걸지도 모른다. 이 경우 노력을 높게 살 수 있겠지만, 소프트웨어 엔지니어링에 대한 본질적인 고찰과 [[호기심]]없이 잘하는 사람을 찾긴 어렵다고 생각한다.)
본문
1: <!DOCTYPE html>
문서 파일의 첫줄에 항상 등장하는 <!DOCTYPE html> 에 대해 물어봄으로써 면접자가 산업에 얼마나 오랫동안 몸을 담그고 있었는지 알 수 있다. DOCTYPE 선언의 변천사
어짜피 브라우저에서 응답 받을 때 MIME 타입이 text/html로 내려오기 때문에 이게 필요없다고 생각할 지도 모른다. 하지만 옛날에는 HTML 문서에 대한 스탠다드가 아직 정해지지 않아서 어떤 HTML스펙에 맞춰 렌더링 해야할지 알 수 없었다.
<!DOCTYPE html>은 브라우저가 현재의 HTML5 스펙을 사용하여 렌더링해야 함을 알려준다.
2: <html dir="ltr" lang="en">
이 코드로 면접자가 접근성과 로컬화에 대해 아는지 확인할 수 있다. 놀랍게도 정말 소수의 사람들만 dir="ltr"에 대해 알고있다. 우선 html태그는 HTML문서의 최상위 요소이고 다른 모든 요소를 포함한다. 여기에 부여된 속성 dir="ltr"은 left-to-right의 줄임말로 글이 쓰여지는 방향을 의미한다. 예를 들어 중동의 언어는 대부분 오른쪽에서 왼쪽으로 흐르므로 rtl 을 사용한다. lang="en" 은 좀 더 유추하기 쉽다. 문서의 내용이 지역코드 en 즉, 영어로 이루어 져있다는 것을 명시한다. 이 두 옵션은 스크린 리더기가 문서를 읽을 때 중요하게 사용된다.
3: <meta charset="utf-8">
meta 태그가 메타데이터를 주기 위해서 필요한 것은 대부분 알고있다. charset 속성은 브라우저가 어떤 캐릭터 인코딩 방식을 사용할 것인지 명시한다. utf-8은 여러나라 언어, 기호, 이모티콘을 포함하는 방식으로 자주 사용된다. 대체로 문서 상위에 선언하는 것이 좋다(문서 파싱 도중에 이 옵션을 발견하면 다시 파싱해야하므로).
4: <meta name="viewport" content="width=device-...
작은 크기의 기기에서 화면을 제대로 보여주기 위한 설정이다. width=device-width는 브라우저가 기기의 너비만큼 viewport를 구성하라고 알려준다. 이렇게 하면 수평 스크롤바가 생기지 않는다. 추가로 scale값을 1로 두고 원하는 경우 확대할 수게 설정하는 경우가 많다.
user-scalable=0확대 축소 기능 비활성화maximum-scale=1
5: <meta property="og:site_name" content="Twitt...
Open Graph용 메타정보 설정. 링크 프리뷰를 카드형태로 나타내기 위한 정보 설정.
- OG는 메타태그에 일반적으로 쓰이는
name이 아닌property라는 non-standard 속성을 사용한다. 비슷 한 정보를 다른 메타태그에서 정보를 가져올 수 있긴 하지만 혹시 모르는 경우를 위해 추가해주는 편이다.
6: <meta name="apple-mobile-web-app-title" cont...
아이폰에서 웹사이트 바로가기를 추가할 때 앱 이름. 아이폰은 웹킷 엔진만 사용해야해서 PWA를 지원하지 않기 때문에 아이폰에서 웹사이트를 최대한 앱처럼 보이게 하기 위해 필수다.
apple-mobile-web-app-status-bar 역시 앱처럼 보이게 하기 위해 사용된다. 상태바가 어떻게 보일지 설정할 수 있다.
8: <meta name="theme-color" content="#ffffff"...
브라우저, 웹앱등에서 겉의 UI에 테마를 적용할 수 있다.
9: <meta http-equiv="origin-trial" content="...
origin-trial은 실험적 기능을 사용하게 해주고, 관련 정보가 웹 스탠다드 커뮤니티에 자동으로 보고되도록 한다. 예를 들어 Edge는 듀얼 스크린 폴더블 폰의 열린 상태에 따라 레이아웃을 달리할 수 있는 origin trial을 진행중이다.
10: html{-ms-text-size-adjust:100%;-webkit-text...
모바일 반응형 웹사이트가 아닐 때 브라우저에서 텍스트 크기를 키울 수 있다. 이 스타일 처리는 브라우저가 맘대로 텍스트 크기를 조절하지 못하게 하거나 바꿀 수 있는 최대 텍스트 크기 비율을 조절한다. 이 경우 100%값이 설정되어있는데, 원래 크기 이상으로 텍스트를 키우지 못하게 제한한다.
-ms- : IE
-webkit- : webkit기반
번외
글쓴이가 한 댓글에 단 답변이 공감이 되어 요약해서 가져와봤다.
댓글:
왜 이게 중요한건지 모르겠다. 팀에서 한명정도만 알면되는 내용이고, 대부분 모던 프레임워크가 처리해준다. 모두 피쳐를 구현하는 것을 더 중요하게 생각할 것이다. 나는 앵귤러를 수년간 했는데 만약 면접에서 이걸 물어보면 망칠거다.
답변:
당신 말이 맞다. 근데 만약 당신이 내 면접을 망친다면 난 당신을 뽑지 않을거다: '대부분 모던 프레임워크가 처리해준다'라고 말한 것이 이해가 되지 않는 것은 아니다. 하지만, 그 프레임워크가 무엇을 하는지와 어떻게 작동하는지를 아는 것은 중요하다. 내가 면접에서 자주 물어보는 질문 중 하나는 "리액트를 다시 구현한다면 어떻게 할건가요?"이다. 이 질문을 물어 봄으로써 면접자가 virtual DOM과 상태변화 등에 대해 어떤 생각을 갖고 있는지 알 수 있고, 그런 것을 고민하도록 할 수 있다. 이런 것을 고민해보지 않은 사람이라면, 난 그 사람을 뽑지 않는다.
프로젝트가 커갈수록 하나에 특화된 사람을 뽑는게 맞다고 생각은 한다. 웹에 대해 잘 모르더라도 앵귤러를 매우 잘하는 사람이 필요하다면 당신을 뽑는게 맞다. 하지만 우린 초기단계에 있기 때문에 난 프레임워크 하나를 그저 잘 사용하는 사람보다는 웹에 대한 이해도가 높은 사람을 뽑을 것이다. 이 글은 그것과 같은 맥락에서 작성했다.